<template>
  <div>
    <nav-header></nav-header>
    <button @click="sortList()">排序</button>

     <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
        <dl class="filter-price">
          <dt>Price:</dt> 
          <dd><a href="javascript:void(0)" @click="setPriceFilter('all')" v-bind:class="{'cur':priceChecked=='all'}">All</a></dd>
          <dd v-for="(item,index) in priceFilter">
            <a href="javascript:void(0)" @click="setPriceFilter(index,item.startPrice,item.endPrice)" v-bind:class="{'cur':priceChecked==index}">{{item.startPrice}} - {{item.endPrice}}</a>
          </dd>
        </dl>
      </div>
     <div class="accessory-list-wrap">
        <div class="accessory-list col-4">
          <ul>
            <li v-for="item in goodsList" :key="item.id">
              <div class="pic">
                <a href="#"><img :src="'static/'+item.productImage" alt=""></a>
                <!-- <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a> -->
              </div>
              <div class="main">
                <div class="name">{{item.productName}}+{{item.productImage}}</div>
                <div class="price">{{item.salePrice}}</div>
                <div class="btn-area">
                  <a href="javascript:;" class="btn btn--m" @click="addCart(item.productid)">加入购物车</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="view-more-normal"
              v-infinite-scroll="loadMore"   
              infinite-scroll-disabled="busy" 
              infinite-scroll-distance="20">  
              <!-- <span v-show="loading">加载中·······</span>  -->
        <img src="./../assets/loading-spinning-bubbles.svg" v-show="loading">
          <!-- 
            v-infinite-scroll  滚动加载的方法
            infinite-scroll-disabled  需不需要禁用方法
            infinite-scroll-distance  离最下面滚动的距离
          -->
        </div>
      </div>
      
  </div>
</template>

<script>
import NavHeader from '@/components/NavHeader'
import axios from 'axios'
export default {

  name: 'GoodList',
  data () {
    return {
      goodsList:[],
      priceChecked:'all',
      priceFilter:[
        {
            startPrice:'0.00',
            endPrice:'100.00'
        },
        {
          startPrice:'100.00',
          endPrice:'500.00'
        },
        {
          startPrice:'500.00',
          endPrice:'1000.00'
        },
        {
          startPrice:'1000.00',
          endPrice:'5000.00'
        }
      ],
      busy:false,
      filterBy:false,
      loading:true,
      param:{
        pageNo:1,
        pageSize:4,

        priceMin:null,
        priceMax:null,
        priceOrder:'ascend',     //ascend  || descend
      },
      msg: 'Welcome to Your Vue.js App',
    }
  },
  mounted(){
    console.log("mounted");
    
      this.getGoodList();
  },
  components:{
    NavHeader
  },
  methods:{
    
    addCart(productId){
      // console.log('增加货物id  '+productId);
      axios.post("/goods/addCart",{productId:productId}).then((res)=>{
        debugger
        console.log("result  ",res);
        if(res.data.status == 0){
          this.$store.commit("updateCartCount",1);
        }
      })
    },
    loadMore(){      
      setTimeout(() => {
        this.param.pageNo++;
       this.getGoodList(true);
      },500)

      
    },
    setPriceFilter(index,startPrice,endPrice){
      this.priceChecked = index;
      this.param.priceMin = startPrice;
      this.param.priceMax = endPrice;
      this.param.pageNo = 1;
      this.getGoodList();
    },
    sortList:function () {
      
      this.param.priceOrder = this.param.priceOrder == "ascend"?"descend":"ascend"
      this.getGoodList();
    },
    getGoodList:function(flag){
      this.loading = true;
      axios.get("/goods/list",{params:this.param}).then((respose)=>{         
        this.loading = false;
        var res = respose.data;
        this.busy = res.result.list.length >= this.param.pageSize ? false:true;
        if(flag){
          this.goodsList = this.goodsList.concat(res.result.list);
        }else{
          this.goodsList = res.result.list;
        }
      })
    },
    toCartPage(){
      this.$router.push({path:"/cart?id=123"});
    }
  }

}
</script>
